<template>
  <div class="content">
    <div class="search-top">
      <van-icon
        name="arrow-left"
        @click="$router.push('/contacts')"
        size="20"
        class="back-btn"
        color="#fff"
      />
      <span>添加好友/群</span>
    </div>
    <div class="search-input">
        <van-field v-model="keyword" placeholder="请输入联系人/群名称" input-align="center" @blur="search"/>
    </div>
    <!-- loading -->
    <div class="loading-contetn" v-show="isLoading">
        <van-loading size="24px">加载中，请稍等...</van-loading>
    </div>
    <!-- 搜索结果 -->
    <div class="search-result-content" v-show="!isLoading">
        <!-- 有数据 -->
        <div class="have-result" v-if="result">
            <div class="friend-result" v-show="friendList.length">
                <div class="title">联系人</div>
                <FriendOrGroupList :dataList="friendList" :listType="0"/>
            </div>
            <div class="group-result" v-show="groupList.length">
                <div class="title">群聊</div>
                <FriendOrGroupList :dataList="groupList" :listType="1"/>
            </div>
        </div>
         <!-- 无数据 -->
        <div class="no-result" v-else>暂无更多...</div>
    </div>
  </div>
</template>

<script>
import FriendOrGroupList from '@/components/FriendOrGroupList'
import { reqSearch } from '@/api'
import { mapState, mapMutations } from 'vuex'
export default {
    components: {
        FriendOrGroupList
    },
    data() {
        return {
            keyword: '', // 输入框内容
            isLoading: false,
            friendList: [],
            groupList: [],
            result: false
        }
    },
    computed: {
        ...mapState({
            keywordVuex: state => state.search.keyword
        })
    },
    methods: {
        ...mapMutations('search', ['setSearchKeyword', 'clearSearchKeyword']),
        //输入框内容搜索
        async search() {
            const { keyword } = this
            if (!keyword) {
                return
            }
            this.isLoading = true
            let res = await reqSearch({keyword})
            this.isLoading = false
            if (res.status === 200) {
                this.result = true
                const { friendList, groupList } = res.data
                this.friendList = friendList
                this.groupList = groupList
            } else {
                this.result = false
            }
        }
    },
    mounted() {
        this.keyword = this.keywordVuex
        this.search()
    },
    beforeRouteLeave(to, from, next) {
        if (to.path === '/userhome' || to.path === '/grouphome') {
            // 如果是搜索页跳转到用户主页/群主页，需要存vuex
            this.setSearchKeyword(this.keyword)
            return next() 
        } else if (to.path === '/contacts') {
            // 清除vuex数据
            this.clearSearchKeyword()
            return next()
        }
    }
}
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.search-top {
  width: 100%;
  height: 1.3333rem;
  background-color: #4dc0ff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.4667rem;
  color: #fff;
  .back-btn {
    position: fixed;
    top: .4rem;
    left: .4rem;
    font-weight: 600;
  }
}
.search-input {
    width: 100%;
    padding: .2667rem .4rem;
    box-sizing: border-box;
    border-bottom: 0.04rem solid #f6f6f6;
}
::v-deep.van-cell {
    background-color: #f6f6f6;
    border-radius: .2rem;
}
.search-result-content {
    flex: 1;
    width: 100%;
    padding: 0 .4rem;
    box-sizing: border-box;
    overflow: auto;
    .title {
        width: 100%;
        height: 1rem;
        color: #818181;
        display: flex;
        align-items: center;
        font-size: .4rem;
    }
}
.no-result, .loading-contetn {
    width: 100%;
    height: 1rem;
    padding-top: .2667rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #818181;
    font-size: .4rem;
}
</style>
